<template>
  <div class="about-page">
    <div class="project-card">
      <div class="project-header">
        <h2 class="project-title">触图万象 - 智能协同云图库平台</h2>
        <div class="tech-stack">
          <span v-for="(tech, index) in project.techStack" :key="index" class="tech-tag">
            {{ tech }}
          </span>
        </div>
      </div>

      <div class="project-content">
        <div class="section">
          <h3 class="section-title">
            <CheckCircleOutlined class="section-icon" />
            项目职责
          </h3>
          <ul class="responsibilities">
            <li v-for="(item, index) in project.responsibilities" :key="index">
              <CheckCircleOutlined class="icon" />
              {{ item }}
            </li>
          </ul>
        </div>

        <div class="section">
          <h3 class="section-title">
            <CheckCircleOutlined class="section-icon" />
            技术亮点
          </h3>
          <div class="features">
            <div v-for="(feature, index) in project.features" :key="index" class="feature-card">
              <div class="feature-icon">{{ feature.icon }}</div>
              <h4 class="feature-title">{{ feature.title }}</h4>
              <p class="feature-desc">{{ feature.description }}</p>
            </div>
          </div>
        </div>

        <div class="section">
          <h3 class="section-title">
            <CheckCircleOutlined class="section-icon" />
            项目成果
          </h3>
          <div class="achievements">
            <div
              v-for="(achievement, index) in project.achievements"
              :key="index"
              class="achievement-item"
            >
              <div class="achievement-icon">{{ achievement.icon }}</div>
              <div class="achievement-value">{{ achievement.value }}</div>
              <div class="achievement-desc">{{ achievement.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CheckCircleOutlined } from '@ant-design/icons-vue'

interface ProjectFeature {
  title: string
  description: string
  icon?: string
}

interface ProjectAchievement {
  value: string
  description: string
  icon?: string
}

interface ProjectData {
  techStack: string[]
  responsibilities: string[]
  features: ProjectFeature[]
  achievements: ProjectAchievement[]
}

const project = ref<ProjectData>({
  techStack: [
    'Vue3',
    'TypeScript',
    'Spring Cloud',
    'Nacos',
    'Sentinel',
    'OpenFeign',
    'Redisson',
    'RabbitMQ',
    'Seata',
    'Redis',
    'WebSocket',
    'COS',
    'Sa-Token',
    'Gateway',
    'ShardingSphere',
    'XXL-Job',
  ],
  responsibilities: [
    '构建智能协同云图库平台，实现公共图库、私有图库、团队共享图库三大核心模块',
    '基于自定义权限校验注解和SpringAOP环绕切面实现权限校验',
    '使用Redis实现共享session登录，后续接入Sa-Token实现精准权限校验',
    '基于Gateway网关实现请求路由、身份校验和动态路由',
    '使用Nacos进行服务配置统一管理，实现配置共享和热更新',
  ],
  features: [
    {
      title: '多级缓存架构',
      description:
        '基于XXL-Job分布式任务调度进行缓存预热，采用Redis+Caffeine构建多级缓存，解决缓存穿透、雪崩、击穿问题',
      icon: '⚡',
    },
    {
      title: '异步消息队列',
      description:
        '基于CompletableFuture异步化扩图任务，采用RabbitMQ异步解耦，三重确认机制保证消息可靠性',
      icon: '🔄',
    },
    {
      title: '高性能数据结构',
      description:
        '使用Redis的zset实现点赞排行榜，Set实现好友关注，bitmap实现签到，HyperLogLog统计UV，极低存储成本',
      icon: '📊',
    },
    {
      title: '数据分片',
      description: '使用ShardingSphere自定义分表算法实现团队空间图片的动态水平分表，提升查询效率',
      icon: '🔍',
    },
    {
      title: '实时协作',
      description: '基于WebSocket实现多人协作编辑图片功能，自定义握手拦截器，支持实时聊天功能',
      icon: '🤝',
    },
    {
      title: '微服务保障',
      description:
        '基于Sentinel实现请求限流、线程隔离、服务熔断，通过Seata实现分布式事务AT最终一致性',
      icon: '🛡️',
    },
  ],
  achievements: [
    {
      value: '500+ 用户并发',
      description: '支持500+用户同时协作，响应时间<200ms',
      icon: '👥',
    },
    {
      value: '99.9% 系统可用性',
      description: '微服务架构确保高可用，熔断降级机制保障核心功能',
      icon: '🔒',
    },
    {
      value: '95% 缓存命中率',
      description: '多级缓存策略使热门数据缓存命中率达95%，数据库压力降低60%',
      icon: '🎯',
    },
  ],
})
</script>

<style scoped lang="scss">
.about-page {
  padding: 24px;
  min-height: 100vh;
  background: #f5f7fa;
  display: flex;
  justify-content: center;
}

.project-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 32px;
  max-width: 1000px;
  width: 100%;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
}

.project-header {
  margin-bottom: 32px;
  text-align: center;

  .project-title {
    font-size: 28px;
    color: #1a73e8;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    padding-bottom: 12px;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: #1a73e8;
      border-radius: 2px;
    }
  }
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;

  .tech-tag {
    background: #e3f2fd;
    color: #1565c0;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      background: #bbdefb;
      transform: translateY(-2px);
    }
  }
}

.section {
  margin-bottom: 40px;

  .section-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;

    .section-icon {
      color: #1a73e8;
    }
  }
}

.responsibilities {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;

  li {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;

    &:hover {
      background: #e6ecf0;
      transform: translateX(8px);
    }

    .icon {
      color: #34d399;
      margin-right: 12px;
      font-size: 18px;
    }
  }
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
  text-align: center;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .feature-icon {
    font-size: 32px;
    margin-bottom: 16px;
  }

  .feature-title {
    color: #1a73e8;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
  }

  .feature-desc {
    font-size: 14px;
    color: #5f6368;
    line-height: 1.6;
  }
}

.achievements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.achievement-item {
  background: #e3f2fd;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #bbdefb;

  &:hover {
    background: #bbdefb;
    transform: translateY(-8px);
  }

  .achievement-icon {
    font-size: 32px;
    margin-bottom: 16px;
  }

  .achievement-value {
    font-size: 24px;
    font-weight: 700;
    color: #1565c0;
    margin-bottom: 12px;
  }

  .achievement-desc {
    font-size: 14px;
    color: #2e3a4e;
    line-height: 1.6;
  }
}

@media (max-width: 768px) {
  .about-page {
    padding: 16px;
  }

  .project-card {
    padding: 20px;
  }

  .project-header .project-title {
    font-size: 24px;
  }

  .features,
  .achievements {
    grid-template-columns: 1fr;
  }
}
</style>
